<script setup>
import { watch } from 'vue'

// // 接收父组件传递的信息
// const props = defineProps({
//   disease: {
//     type: String,
//     required: true
//   },
//   indicate: {
//     type: String,
//     required: true
//   },
//   isMedication: {
//     type: String,
//     required: true
//   },
//   medication: {
//     type: String,
//     required: true
//   },
//   enabled: {
//     type: Boolean,
//     default: false
//   }
// })

// // 定义症状数据
// const symptomInfo = ref({
//   disease: props.disease,
//   indicate: props.indicate,
//   isMedication: props.isMedication,
//   medication: props.medication
// })

// // 定义emit函数
// const emit = defineEmits([
//   'updateDisease',
//   'updateIndicate',
//   'updateIsMedication',
//   'updateMedication'
// ])

// // 更新disease
// const updateDisease = (value) => {
//   if (
//     value === '0' ||
//     props.enabled === false ||
//     value === ''
//   ) {
//     symptomInfo.value.indicate = ''
//     symptomInfo.value.isMedication = ''
//     symptomInfo.value.medication = ''
//   }
//   emit('updateDisease', value)
// }

// // 更新indicate
// const updateIndicate = (value) => {
//   emit('updateIndicate', value)
// }

// // 更新isMedication
// const updateIsMedication = (value) => {
//   if (value === '0' || value === '') {
//     symptomInfo.value.medication = ''
//   }
//   emit('updateIsMedication', value)
// }

// // 更新medication
// const updateMedication = (value) => {
//   emit('updateMedication', value)
// }

// // 监听props变化，更新symptomInfo
// watch(
//   () => props.enabled,
//   (newVal) => {
//     if (newVal === false) {
//       // 全部设置为初始值
//       symptomInfo.value.disease = ''
//       symptomInfo.value.indicate = ''
//       symptomInfo.value.isMedication = ''
//       symptomInfo.value.medication = ''
//     }
//   }
// )

const props = defineProps({
  showRadio: {
    type: Boolean,
    default: false
  }
})

const disease = defineModel('disease', {
  type: String,
  default: null
})
const indicate = defineModel('indicate', {
  type: String,
  default: null
})
const isMedication = defineModel('isMedication', {
  type: String,
  default: null
})
const medication = defineModel('medication', {
  type: String,
  default: null
})

// 如果showRadio为false，则全部设置为初始值
watch(
  () => props.showRadio,
  (newVal) => {
    if (newVal === false) {
      disease.value = '0'
      indicate.value = ''
      isMedication.value = '0'
      medication.value = ''
    }
  }
)

// 监听disease变化，更新indicate
watch(
  () => disease.value,
  (newVal) => {
    // console.log('newVal', newVal)
    if (newVal === '0' || newVal === '') {
      indicate.value = ''
      isMedication.value = '0'
      medication.value = ''
    }
  }
)

// 监听isMedication变化，更新medication
watch(
  () => isMedication.value,
  (newVal) => {
    // console.log('newVal', newVal)
    if (newVal === '0' || newVal === '') {
      medication.value = ''
    }
  }
)
</script>

<template>
  <!-- <div class="checkbox-first-group">
    <el-radio
      class="checkbox-1"
      v-model="symptomInfo.disease"
      label="0"
      size="large"
      @change="updateDisease"
      :disabled="!enabled"
      >无
    </el-radio>
    <el-radio
      class="checkbox-2"
      v-model="symptomInfo.disease"
      label="1"
      size="large"
      @change="updateDisease"
      :disabled="!enabled"
    >
      有:
      <el-input
        placeholder="请注明"
        style="width: 200px"
        :disabled="
          symptomInfo.disease === '0' ||
          symptomInfo.disease === ''
        "
        v-model="symptomInfo.indicate"
        @input="updateIndicate"
      ></el-input>
    </el-radio>

    <div class="checkbox-second-group">
      <div class="title">用药:</div>
      <div class="checkbox-3">
        <el-radio
          :disabled="
            symptomInfo.disease === '0' ||
            symptomInfo.disease === ''
          "
          v-model="symptomInfo.isMedication"
          label="0"
          size="large"
          @change="updateIsMedication"
          >无</el-radio
        >
        <el-radio
          :disabled="
            symptomInfo.disease === '0' ||
            symptomInfo.disease === ''
          "
          v-model="symptomInfo.isMedication"
          label="1"
          size="large"
          @change="updateIsMedication"
        >
          有:
          <el-input
            placeholder="请注明用药"
            :disabled="
              symptomInfo.isMedication === '' ||
              symptomInfo.isMedication === '0'
            "
            style="width: 200px"
            v-model="symptomInfo.medication"
            @input="updateMedication"
          ></el-input>
        </el-radio>
      </div>
    </div>
  </div> -->

  <div class="checkbox-first-group">
    <el-radio
      class="checkbox-1"
      v-model="disease"
      label="0"
      size="large"
      :disabled="!showRadio"
      >无
    </el-radio>
    <el-radio
      class="checkbox-2"
      v-model="disease"
      label="1"
      size="large"
      :disabled="!showRadio"
    >
      有:
      <el-input
        :disabled="
          disease === '0' || disease === '' || !showRadio
        "
        placeholder="请注明"
        style="width: 200px"
        v-model="indicate"
      ></el-input>
    </el-radio>

    <div class="checkbox-second-group">
      <div class="title">用药:</div>
      <div class="checkbox-3">
        <el-radio
          v-model="isMedication"
          label="0"
          size="large"
          :disabled="
            disease === '0' || disease === '' || !showRadio
          "
          >无</el-radio
        >
        <el-radio
          v-model="isMedication"
          label="1"
          size="large"
          :disabled="
            disease === '0' || disease === '' || !showRadio
          "
        >
          有:
          <el-input
            placeholder="请注明用药"
            style="width: 200px"
            v-model="medication"
            :disabled="
              isMedication === '' ||
              isMedication === '0' ||
              !showRadio ||
              disease === '0' ||
              disease === ''
            "
          ></el-input>
        </el-radio>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.checkbox-first-group {
  .checkbox-second-group {
    // 设置向右偏移
    margin-left: -40px;
    // tiltle和checbox位于同一行
    display: flex;
    .title {
      // 设置右边距
      margin-right: 10px;
      // 设置字体颜色
      color: #606266;
    }
  }
}

.el-input {
  // 设置大小
  height: 20px;
  :deep(.el-input__wrapper) {
    padding-bottom: -10px;
    box-shadow: none; // 去掉阴影
    border: none; // 去掉边框
    .el-input__inner {
      border: none; // 去掉内部输入框的边框
      border-bottom: 1px solid;
      // 设置边框距离底部的距离
      font-size: 14px
        var(--el-input-border-color, var(--el-border-color)); // 只显示底部边框
      cursor: default !important;
    }
  }
}
</style>
